<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Group Setting</title>
    <style>
        input {
            width: 300px;
        }

        textarea {
            width: 100%;
            resize: vertical;
            min-height: 30px;
        }

        textarea[readonly] {
            min-height: 30px;
        }

        input,
        pre,
        textarea {
            font-family: "Segoe WPC", "Segoe UI", sans-serif;
            width: 100%;
        }

        .display-flex {
            display: flex;
        }

        .padding-left-20 {
            padding-left: 20px;
        }

        label {
            display: inline-block;
            min-width: 50px;
        }

        div {
            padding: 5px;
        }

        [readonly] {
            background-color: #ccc;
        }

        fieldset {
            margin-bottom: 10px;
        }
    </style>
</head>

<body>

    <fieldset>
        <legend>
            Template set
        </legend>
        <div class="display-flex">
            <label>name:</label>
            <input id="inputName">
        </div>
        <div class="display-flex">
            <label>url:</label>
            <input id="inputUrl">
        </div>
        <div>
            <button id="btnSend">send</button>
        </div>
        <div>
            <textarea id="areaHtmlContent" readonly placeholder="Load html content result"></textarea>
        </div>
    </fieldset>

    <fieldset>
        <legend>
            Chapter regex set
        </legend>


        <div class="display-flex">
            start: <input id="inputStart">
            <span class="padding-left-20">end:</span><input id="inputEnd">
        </div>
        <div>
            regex: <strong>href="(?&lt;link&gt;.*?)" (?&lt;title&gt;.*?)</strong>
            <textarea id="inputRegex"></textarea>
        </div>

        <div>
            <textarea id="preResult" readonly placeholder="Regex test result"></textarea>
        </div>

        <button id="btnTest">test</button>
    </fieldset>

    <fieldset>
        <legend>Content regex set</legend>

        <div>
            <input id="inputDetailUrl" placeholder="Content url, eg: https://www.biqudu.net/40_40517/3471309.html">
            <button id="btnLoadDetail">load detail</button>
            <textarea id="areaHtmlDetailContent" readonly placeholder="Load html content result"></textarea>
        </div>

        <div>
            regex: <strong>&lt;div&gt;(?&lt;content&gt;.*?)&lt;/div&gt;</strong>
            <textarea id="inputDetailRegex"></textarea>
        </div>
        <div>
            <button id="btnDetailTest">test</button>
            <textarea id="preDetailResult" readonly placeholder="Regex test result"></textarea>
        </div>
    </fieldset>

    <button id="btnSave">save</button>

    <script>
        let globalConfig = "%Config%";
    </script>
    <script>
        const vscode = acquireVsCodeApi();
        let $inputName = document.getElementById('inputName');
        let $inputUrl = document.getElementById('inputUrl');

        // init Data 
        if (globalConfig.isEditing) {
            $inputName.setAttribute("readonly", "readonly");
            let editData = globalConfig.editData;
            document.getElementById('inputName').value = editData.name;
            document.getElementById('inputUrl').value = editData.url;
            document.getElementById("inputStart").value = editData.start;
            document.getElementById("inputEnd").value = editData.end;
            document.getElementById("inputRegex").value = editData.regex;
            document.getElementById("inputDetailRegex").value = editData.detailRegex;
        }

        document.getElementById('btnSend').addEventListener('click', () => {
            let url = $inputUrl.value;

            let handler = vscode.postMessage({
                command: 'getHtmlContentFromUrl',
                text: url
            });
        });

        document.getElementById('btnTest').addEventListener('click', () => {
            vscode.postMessage({
                command: 'catchTest',
                text: JSON.stringify({
                    url: document.getElementById('inputUrl').value,
                    htmlContent: document.getElementById("areaHtmlContent").value,
                    start: document.getElementById("inputStart").value,
                    end: document.getElementById("inputEnd").value,
                    regex: document.getElementById("inputRegex").value,
                })
            });
        });

        document.getElementById('btnDetailTest').addEventListener('click', () => {
            vscode.postMessage({
                command: 'catchDetailTest',
                data: {
                    htmlContent: document.getElementById('areaHtmlDetailContent').value,
                    regex: document.getElementById("inputDetailRegex").value
                }
            });
        });

        document.getElementById('btnLoadDetail').addEventListener('click', () => {
            vscode.postMessage({
                command: 'getHtmlContentFromDetailUrl',
                text: document.getElementById('inputDetailUrl').value
            });
        });

        document.getElementById('btnSave').addEventListener('click', () => {
            vscode.postMessage({
                command: 'saveConfig',
                data: {
                    name: document.getElementById('inputName').value,
                    url: document.getElementById('inputUrl').value,
                    start: document.getElementById("inputStart").value,
                    end: document.getElementById("inputEnd").value,
                    regex: document.getElementById("inputRegex").value,
                    detailRegex: document.getElementById("inputDetailRegex").value
                }
            });
        });

        window.addEventListener('message', event => {

            const message = event.data; // The JSON data our extension sent

            switch (message.command) {
                case 'getHtmlContentFromUrlResult':
                    document.getElementById('areaHtmlContent').value = message.text;
                    break;
                case 'catchTestResult':
                    document.getElementById('preResult').value = JSON.stringify(message.data, '', 2);
                    break;
                case 'getHtmlContentFromDetailUrlResult':
                    document.getElementById('areaHtmlDetailContent').value = message.text;
                    break;
                case 'catchDetailTestResult':
                    document.getElementById('preDetailResult').value = message.data;
                    break;
            }
        });
    </script>
</body>

</html>